<template>
    <v-layout fill-height class="bg-white">
        <v-app-bar color="white" flat app>
            <v-btn icon @click="$router.go(-1)">
                <v-icon>arrow_back</v-icon>
            </v-btn>
            <v-toolbar-title>身份认证</v-toolbar-title>
            <v-spacer></v-spacer>
        </v-app-bar>
        <v-flex class="flex-auto">
            <v-divider></v-divider>
            <v-subheader class="subtitle-1">请上传身份证正面照片：</v-subheader>
            <div class="row-center">
                <input id="previewImg" class="absolute h0 w0 caption" type="file" accept="image/*"
                       @change="previewImg($event,$const.uploadType.frontIdCardImg)">
                <label for="previewImg">
                    <div class="w290px h180px bd-dashed">
                        <v-img class="w290px h180px" v-if="idCardFrontImg" :src="idCardFrontImg.src"></v-img>
                        <v-icon v-else class="w290px h180px font150">add</v-icon>
                    </div>
                </label>
            </div>
            <h3 class="px-5 mt-3 red--text">上传身份证照片后会增加20颜值分，如果审核不通过会将颜值分扣除</h3>
            <h3 class="px-5 mt-3 red--text">审核不通过将30天内无法再次认证，请认真对待，上传真实照片</h3>
            <!--<v-subheader class="subtitle-1">身份证反面照片：</v-subheader>
            <div class="row-center">
                <input id="previewImg1" class="absolute h0 w0 caption" type="file" accept="image/*"
                       @change="previewImg($event,$const.backIdCard)">
                <label for="previewImg1">
                    <div class="w290px h180px bd-dashed">
                        <v-img class="w290px h180px" v-if="idCardNegative" :src="idCardNegative"></v-img>
                        <v-icon v-else class="w290px h180px font150">add</v-icon>
                    </div>
                </label>
            </div>-->
            <div class="row-around mt-40">
                <v-btn color="accent" depressed @click="cancelClick">取消</v-btn>
                <v-btn color="primary" :disabled="!idCardFrontImg" depressed @click="authenticationIdCard">认证</v-btn>
            </div>
        </v-flex>
    </v-layout>
</template>

<script lang="ts">
  import {Component, Model, Vue} from 'vue-property-decorator'
  import User from "@/model/User"
  import ImgFile from "@/model/ImgFile"
  import RouterName from "@/const/RouterName"
  import CommonStatus from "@/const/CommonStatus"

  import {namespace} from "vuex-class"

  const userModule = namespace('user')

  @Component
  export default class Authentication extends Vue {
    @userModule.State('user') user: User
    //身份证正面文件
    idCardFrontImg: ImgFile = null
    //身份证反面文件
    // idCardBack: File = null


    previewImg({target}: any, type) {
      this.$img.getImgObj(target).then((imgObj) => {
        if (type === this.$const.uploadType.frontIdCardImg) {
          this.idCardFrontImg = imgObj
        }
      })
    }

    cancelClick() {
      this.$routerTo(RouterName.mine)
    }

    authenticationIdCard() {
      if (!this.user.idCardStatus || this.user.idCardStatus === CommonStatus.init) {
        this.$img.uploadImgAPI(this.idCardFrontImg.file, this.$const.uploadType.frontIdCardImg)
          .then(res => {
            // 上面两个请求都完成后，才执行这个回调方法
            this.$post('user/idCard/add', {
              frontIdCardImg: res.data.img,
            }).then(res => {
              this.$store.commit('user/setUser', res.data)
              this.$alert('提交认证，等待审核！').then(() => {
                this.$routerTo(RouterName.mine)
              })
            })
          })
      } else {
        this.$error("已经提交过认证申请，暂无法再次提交!")
      }

      /*const frontFormData = new FormData()
      frontFormData.append("file", this.idCardFront)
      frontFormData.append("idCardType", this.$const.uploadType.frontIdCardImg)
      const backFormData = new FormData()
      backFormData.append("file", this.idCardBack)
      frontFormData.append("idCardType", this.$const.backIdCard)
      this.$axios.all(
        [
          this.$post('/upload/img', frontFormData),
          this.$post('/upload/img', backFormData)
        ]
      )*/
    }
  }
</script>
